<template>
	<view class="userPage">
		<!-- 用户名，用户头像 -->
		<user-nameavatar :nickName="nickName" :avatarUrl="avatarUrl" />

		<!-- 收藏/点赞投诉 -->
		<user-nav />

		<!-- 我要投诉、投诉记录 -->
		<view class="item">
			<view hover-class="hcls" hover-stay-time="100">
				<text>我要投诉</text>
				<text>向我们发起投诉或建议 &#xed1e;</text>
			</view>

			<view hover-class="hcls" hover-stay-time="100">
				<text>投诉记录</text>
				<text>查看历史投诉记录 &#xed1e;</text>
			</view>
		</view>

		<!-- 我的企业信息 -->
		<view class="item">
			<view hover-class="hcls" hover-stay-time="100">
				<text>我的企业信息</text>
				<text>查看 &#xed1e;</text>
			</view>
		</view>

		<!-- 隐私政策、清除缓存、退出登录 -->
		<view class="item">
			<view hover-class="hcls" hover-stay-time="100">
				<text>隐私政策</text>
				<text>隐私政策 &#xed1e;</text>
			</view>

			<view hover-class="hcls" hover-stay-time="100">
				<text>清除缓存</text>
				<text>清除缓存 &#xed1e;</text>
			</view>

			<view hover-class="hcls" hover-stay-time="100">
				<text>退出登录</text>
				<text>退出登录 &#xed1e;</text>
			</view>
		</view>

		<text class="footer">
			民营经济投诉服务中心 \n 技术支持-广西昊华科技股份有限公司
		</text>
	</view>
</template>

<script setup lang="ts">
	import userStore from "/stores/user.ts"
	let { nickName, avatarUrl } = userStore()

	console.log("nickName", nickName)
</script>

<style lang="scss" scoped>
	.userPage {
		background-color: #f4f6f6;
		padding: 60rpx 0 40rpx;
		color: #fff;
		min-height: inherit;
		box-shadow: inset 0px 240px 0px 0px #3782FE;
		display: flex;
		flex-direction: column;
	}

	// 每个item的样式--
	.item {
		font-family: "iconfont";
		margin: 20rpx 20rpx 0rpx;
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;

		>view {
			display: flex;
			justify-content: space-between;
			padding: 34rpx 26rpx;
		}

		text {
			&:first-of-type {
				font-size: 30rpx;
				color: #333837;
			}

			font-size: 26rpx;
			color: #a0acaa;
		}
	}

	// 每个item的样式==

	// 点击view标签时有阴影效果
	.hcls {
		background-color: #f4f4f4;
	}

	// 底部文本提示
	.footer {
		margin-top: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #b6b9bb;
		margin-top: auto;
	}
</style>
